.e-floating-bars{--e-floating-bars-announcement-bg-color:#467ff7;--e-floating-bars-announcement-text-color:#fff;--e-floating-bars-announcement-icon-color:#fff;--e-floating-bars-cta-button-text-color:#fff;--e-floating-bars-cta-button-text-color-hover:#467ff7;--e-floating-bars-cta-button-bg-color:#1c2448;--e-floating-bars-cta-button-bg-color-hover:#fff;--e-floating-bars-cta-button-border-color:#1c2448;--e-floating-bars-cta-button-border-color-hover:#1c2448;--e-floating-bars-close-button-color:#fff;--e-floating-bars-announcement-icon-size:20px;--e-floating-bars-elements-padding-block-end:12px;--e-floating-bars-elements-padding-block-start:12px;--e-floating-bars-elements-padding-inline-end:16px;--e-floating-bars-elements-padding-inline-start:16px;--e-floating-bars-elements-gap:16px;--e-floating-bars-cta-corners:50px;--e-floating-bars-cta-button-border-width:2px;--e-floating-bars-cta-button-padding-block-end:8px;--e-floating-bars-cta-button-padding-block-start:8px;--e-floating-bars-cta-button-padding-inline-end:20px;--e-floating-bars-cta-button-padding-inline-start:20px;--e-floating-bars-cta-button-icon-gap:5px;--e-floating-bars-cta-button-animation-delay:500ms;--e-floating-bars-cta-button-animation-duration:1000ms;--e-floating-bars-background-overlay-opacity:0.5;--e-floating-bars-close-icon-size:24px;align-items:center;background-color:var(--e-floating-bars-announcement-bg-color);color:var(--e-floating-bars-announcement-text-color);display:flex;gap:var(--e-floating-bars-elements-gap);position:relative;padding-block-end:var(--e-floating-bars-elements-padding-block-end);padding-block-start:var(--e-floating-bars-elements-padding-block-start);padding-inline-end:var(--e-floating-bars-elements-padding-inline-end);padding-inline-start:var(--e-floating-bars-elements-padding-inline-start);width:100%;z-index:10000}@media (max-width:ELEMENTOR_SCREEN_MOBILE_MAX){.e-floating-bars{align-items:flex-start;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:var(--e-floating-bars-elements-gap);row-gap:16px}}.e-floating-bars:focus{outline:none}.e-floating-bars.has-vertical-position-top{inset-block-start:0}.e-floating-bars.has-vertical-position-bottom{inset-block-end:0}.e-floating-bars.is-sticky{inset-inline-end:0;inset-inline-start:0;position:fixed}.e-floating-bars.is-hidden{display:none}.e-floating-bars.has-close-button{padding-inline-end:calc(var(--e-floating-bars-elements-padding-inline-end) + 20px);padding-inline-start:calc(var(--e-floating-bars-elements-padding-inline-start) + 20px)}.e-floating-bars .has-corners-rounded{--e-floating-bars-corners:20px}.e-floating-bars .has-corners-round{--e-floating-bars-corners:50px}.e-floating-bars .has-corners-sharp{--e-floating-bars-corners:0}.e-floating-bars__announcement-text{align-items:center;color:var(--e-floating-bars-announcement-text-color);display:flex;font-size:16px;font-weight:400;height:100%;margin:0}.e-floating-bars__announcement-icon{align-items:center;color:var(--e-floating-bars-announcement-icon-color);display:flex;height:100%}.e-floating-bars__announcement-icon svg{fill:var(--e-floating-bars-announcement-icon-color);height:var(--e-floating-bars-announcement-icon-size);width:var(--e-floating-bars-announcement-icon-size)}.e-floating-bars__announcement-icon i{color:var(--e-floating-bars-announcement-icon-color);font-size:var(--e-floating-bars-announcement-icon-size)}.e-floating-bars__cta-icon{color:var(--e-floating-bars-cta-button-text-color);display:inline-flex;transition:all .3s}.e-floating-bars__cta-icon svg{fill:var(--e-floating-bars-cta-button-text-color);height:1em;transition:all .3s;width:1em}.e-floating-bars__cta-button-container{order:3}@media (max-width:ELEMENTOR_SCREEN_MOBILE_MAX){.e-floating-bars__cta-button-container{display:flex;grid-column:span 2/span 2;grid-row-start:2}}.e-floating-bars__cta-button,.e-floating-bars__cta-button:not([href]):not([tabindex]){align-items:center;color:var(--e-floating-bars-cta-button-text-color);display:inline-flex;font-size:16px;font-weight:700;gap:var(--e-floating-bars-cta-button-icon-gap);position:relative;transition:all .3s;white-space:nowrap}.e-floating-bars__cta-button.animated,.e-floating-bars__cta-button:not([href]):not([tabindex]).animated{animation-delay:var(--e-floating-bars-cta-button-animation-delay);animation-duration:var(--e-floating-bars-cta-button-animation-duration);animation-iteration-count:1}.e-floating-bars__cta-button.has-entrance-animation,.e-floating-bars__cta-button:not([href]):not([tabindex]).has-entrance-animation{opacity:0}.e-floating-bars__cta-button.visible,.e-floating-bars__cta-button:not([href]):not([tabindex]).visible{opacity:1}.e-floating-bars__cta-button:focus,.e-floating-bars__cta-button:focus .e-floating-bars__cta-icon,.e-floating-bars__cta-button:hover,.e-floating-bars__cta-button:hover .e-floating-bars__cta-icon,.e-floating-bars__cta-button:not([href]):not([tabindex]):focus,.e-floating-bars__cta-button:not([href]):not([tabindex]):focus .e-floating-bars__cta-icon,.e-floating-bars__cta-button:not([href]):not([tabindex]):hover,.e-floating-bars__cta-button:not([href]):not([tabindex]):hover .e-floating-bars__cta-icon{color:var(--e-floating-bars-cta-button-text-color-hover);transition:all .3s}.e-floating-bars__cta-button:focus .e-floating-bars__cta-icon svg,.e-floating-bars__cta-button:hover .e-floating-bars__cta-icon svg,.e-floating-bars__cta-button:not([href]):not([tabindex]):focus .e-floating-bars__cta-icon svg,.e-floating-bars__cta-button:not([href]):not([tabindex]):hover .e-floating-bars__cta-icon svg{fill:var(--e-floating-bars-cta-button-text-color-hover);transition:all .3s}.e-floating-bars__cta-button.has-border,.e-floating-bars__cta-button:not([href]):not([tabindex]).has-border{border:var(--e-floating-bars-cta-button-border-width) solid var(--e-floating-bars-cta-button-border-color)}.e-floating-bars__cta-button.has-border:focus,.e-floating-bars__cta-button.has-border:hover,.e-floating-bars__cta-button:not([href]):not([tabindex]).has-border:focus,.e-floating-bars__cta-button:not([href]):not([tabindex]).has-border:hover{border-color:var(--e-floating-bars-cta-button-border-color-hover)}.e-floating-bars__cta-button.is-type-button,.e-floating-bars__cta-button:not([href]):not([tabindex]).is-type-button{background-color:var(--e-floating-bars-cta-button-bg-color);border-radius:var(--e-floating-bars-corners);padding-block-end:var(--e-floating-bars-cta-button-padding-block-end);padding-block-start:var(--e-floating-bars-cta-button-padding-block-start);padding-inline-end:var(--e-floating-bars-cta-button-padding-inline-end);padding-inline-start:var(--e-floating-bars-cta-button-padding-inline-start)}.e-floating-bars__cta-button.is-type-button:focus,.e-floating-bars__cta-button.is-type-button:hover,.e-floating-bars__cta-button:not([href]):not([tabindex]).is-type-button:focus,.e-floating-bars__cta-button:not([href]):not([tabindex]).is-type-button:hover{background-color:var(--e-floating-bars-cta-button-bg-color-hover)}.e-floating-bars__cta-button.is-type-link,.e-floating-bars__cta-button:not([href]):not([tabindex]).is-type-link{text-decoration:none}.e-floating-bars__cta-button.is-type-link .e-floating-bars__cta-text,.e-floating-bars__cta-button:not([href]):not([tabindex]).is-type-link .e-floating-bars__cta-text{text-decoration:underline}.e-floating-bars__close-button,.e-floating-bars__close-button[type=button]{align-items:center;display:flex;position:absolute}.e-floating-bars__close-button[type=button] i,.e-floating-bars__close-button i{font-size:var(--e-floating-bars-close-icon-size)}@media (max-width:ELEMENTOR_SCREEN_MOBILE_MAX){.e-floating-bars__close-button,.e-floating-bars__close-button[type=button]{top:10px}}.e-floating-bars__close-button,.e-floating-bars__close-button:focus,.e-floating-bars__close-button:hover,.e-floating-bars__close-button[type=button],.e-floating-bars__close-button[type=button]:focus,.e-floating-bars__close-button[type=button]:hover{background-color:transparent;border:0;color:var(--e-floating-bars-close-button-color);padding:0}.e-floating-bars__close-button:focus i,.e-floating-bars__close-button:hover i,.e-floating-bars__close-button[type=button]:focus i,.e-floating-bars__close-button[type=button]:hover i,.e-floating-bars__close-button[type=button] i,.e-floating-bars__close-button i{color:var(--e-floating-bars-close-button-color)}.e-floating-bars__overlay{background-position:50%;background-size:cover;height:100%;inset-block-end:0;inset-block-start:0;inset-inline-end:0;inset-inline-start:0;opacity:var(--e-floating-bars-background-overlay-opacity);position:absolute;width:100%;z-index:-1}.e-con.e-con--floating-bars,.e-con:has(.e-floating-bars){padding:0}.e-con.e-con--floating-bars>.e-con-inner,.e-con.e-con--floating-bars>.e-con-inner.e-con-inner--floating-bars,.e-con:has(.e-floating-bars)>.e-con-inner,.e-con:has(.e-floating-bars)>.e-con-inner.e-con-inner--floating-bars{max-width:unset;padding-block-end:0;padding-block-start:0}import { Heading, Text } from '@elementor/app-ui';
import ConditionsProvider from '../../context/conditions';
import { Context as TemplatesContext } from '../../context/templates';
import ConditionsRows from './conditions-rows';

import './conditions.scss';
import BackButton from '../../molecules/back-button';

export default function Conditions( props ) {
	const { findTemplateItemInState, updateTemplateItemState } = React.useContext( TemplatesContext ),
		template = findTemplateItemInState( parseInt( props.id ) );

	if ( ! template ) {
		return <div>{ __( 'Not Found', 'elementor-pro' ) }</div>;
	}

	return (
		<section className="e-site-editor-conditions">
			<BackButton />
			<div className="e-site-editor-conditions__header">
				<img
					className="e-site-editor-conditions__header-image"
					src={ `${ elementorAppProConfig.baseUrl }/modules/theme-builder/assets/images/conditions-tab.svg` }
					alt={ __( 'Import template', 'elementor-pro' ) }
				/>
				<Heading variant="h1" tag="h1">
					{ __( 'Where Do You Want to Display Your Template?', 'elementor-pro' ) }
				</Heading>
				<Text variant="p">
					{ __( 'Set the conditions that determine where your template is used throughout your site.', 'elementor-pro' ) }
					<br />
					{ __( 'For example, choose \'Entire Site\' to display the template across your site.', 'elementor-pro' ) }
				</Text>
			</div>
			<ConditionsProvider currentTemplate={ template } onConditionsSaved={ updateTemplateItemState }>
				<ConditionsRows onAfterSave={ () => history.back() } />
			</ConditionsProvider>
		</section>
	);
}

Conditions.propTypes = {
	id: PropTypes.string,
};